<template>
  <div>
    <header>
      <div class="h-top">
        <van-nav-bar left-arrow @click-left="onClickLeft">
          <template #right>
            <van-icon name="guide-o" size="18" />
          </template>
          <template #left>
            <van-icon name="arrow-left" size="18" />
          </template>
        </van-nav-bar>
      </div>
      <div class="h-bot">
        <div class="h-img" v-if="indexList.ticketinfo">
          <img :src="indexList.ticketinfo[0]" alt="" />
        </div>
      </div>
    </header>
    <main>
      <div class="title">
        <h3>{{ indexList.title }}</h3>
        <span
          ><van-icon name="like-o" size="18" />{{ indexList.want }}人想去</span
        >
      </div>
      <div class="add">
        <p>
          <img src="@/assets/img/Z-ticketinfo2.png" alt="" />
          <span>{{ indexList.time }}</span>
        </p>
        <p>
          <img src="@/assets/img/Z-ticketinfo1.png" alt="" />
          <span>{{ indexList.addr }}</span>
        </p>
      </div>
      <p class="no">不可退票 - 电子票 / 兑换票</p>
    </main>
    <div class="active">
      <h3>活动介绍</h3>
      <div class="a-img" v-if="indexList.ticketinfo">
        <img src="@/assets/img/Z-ticketinfo3.png" alt="" />
      </div>
    </div>
    <footer>
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-button
          type="danger"
          text="立即购票"
          @click="showPopup"
        />
        <van-popup v-model:show="show" position="bottom">
          <div class="s-top">
            <p>选择场次</p>
            <span>{{ indexList.time }}</span>
          </div>
          <div class="s-top">
            <p>选择票价</p>
            <span>{{ indexList.price }}元 （预售票）</span>
            <van-stepper
              v-model="value"
              theme="round"
              button-size="22"
              disable-input
            />
          </div>
          <van-action-bar-button
            type="danger"
            text="立即购票"
            @click="showPopup1"
          />
          <van-popup v-model:show="show1" position="bottom"
            ><van-password-input
              :value="value1"
              :focused="showKeyboard"
              info="请输入支付密码"
              :error-info="errorInfo"
              @focus="showKeyboard = true" />
            <!-- 数字键盘 -->
            <van-number-keyboard
              v-model="value1"
              :show="showKeyboard"
              @blur="showKeyboard = false"
          /></van-popup>
        </van-popup>
      </van-action-bar>
    </footer>
  </div>
</template>

<script>
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  NavBar,
  Toast,
  Icon,
  ActionBar,
  ActionBarIcon,
  ActionBarButton,
  Popup,
  Stepper,
  PasswordInput,
  NumberKeyboard,
} from "vant";
export default {
  setup() {
    // 头部导航栏
    const router = useRouter();
    const route = useRoute();
    const id = route.params.id;
    const onClickLeft = () => router.push("/home");
    const onClickRight = () => Toast("按钮");
    //漫展详情数据变量
    const indexList = ref({});
    const count = ref(id);
    const cation = id.split("&")[1];
    console.log(cation);

    //购票弹出框展示变量
    const show = ref(false);
    const show1 = ref(false);

    //购票数量变量
    const value = ref(1);
    //本地存储变量
    let buystick = [];

    //支付密码变量
    const value1 = ref("");
    const showKeyboard = ref(true);
    const errorInfo = ref("");
    //请求详情数据

    onMounted(() => {
      if (cation == 1) {
        fetch(
          `http://2107.wqdp.com.cn/index/ticketinfo?id=${count.value}&type=1`
        )
          .then((response) => response.json())
          .then((res) => {
            indexList.value = res.result[0];
          });
      } else if (cation == 2) {
        fetch(
          `http://2107.wqdp.com.cn/index/ticketinfo?id=${count.value}&type=2`
        )
          .then((response) => response.json())
          .then((res) => {
            indexList.value = res.result[0];
            console.log(res);
          });
      } else if (cation == 3) {
        fetch(
          `http://2107.wqdp.com.cn/index/ticketinfo?id=${count.value}&type=3`
        )
          .then((response) => response.json())
          .then((res) => {
            indexList.value = res.result[0];
            console.log(res);
          });
      } else if (cation == 4) {
        fetch(
          `http://2107.wqdp.com.cn/index/ticketinfo?id=${count.value}&type=4`
        )
          .then((response) => response.json())
          .then((res) => {
            indexList.value = res.result[0];
            console.log(res);
          });
      } else if (cation == 5) {
        fetch(
          `http://2107.wqdp.com.cn/index/ticketinfo?id=${count.value}&type=5`
        )
          .then((response) => response.json())
          .then((res) => {
            indexList.value = res.result[0];
            console.log(res);
          });
      }
    });

    //弹出购买详情事件
    const showPopup = () => {
      //判断是否有token
      if (localStorage.getItem("token")) {
        fetch("http://2107.wqdp.com.cn/users/token", {
          method: "POST",
          body: JSON.stringify({
            token: localStorage.getItem("token"),
          }),
          headers: {
            "content-type": "application/json",
          },
        })
          .then((response) => response.json())
          .then((res) => {
            //判断token是否正确
            if (res.status == 0) {
              show.value = true;
            } else {
              Toast.fail("用户信息错误");
              localStorage.removeItem("token");
              router.push("/login");
            }
          });
      } else {
        router.push("/login");
      }
    };
    //弹出购票事件
    const showPopup1 = () => {
      show1.value = true;
      value1.value = "";
    };

    //侦听支付密码是否正确
    watch(value1, (newVal) => {
      if (newVal.length === 6) {
        fetch("http://2107.wqdp.com.cn/users/token", {
          method: "POST",
          body: JSON.stringify({
            token: localStorage.getItem("token"),
            zfmm: newVal,
          }),
          headers: {
            "content-type": "application/json",
          },
        })
          .then((response) => response.json())
          .then((res) => {
            //密码正确往订单中传输数据
            if (res.status == 0) {
              Toast.success("支付成功");
              //传输数据变量
              const stickdetail = {
                id: count.value,
                title: indexList.value.title,
                img: indexList.value.ticketinfo[0],
                num: value.value,
                time: indexList.value.time,
                price: value.value * indexList.value.price,
              };
              //获取本地存储
              let stick = JSON.parse(sessionStorage.getItem("buystick"));
              //判定是否有本地储存
              if (stick) {
                //如果有找到id 重新赋值num
                if (stick.some((el) => el.id === id)) {
                  let _index = stick.findIndex((elm) => elm.id == id);
                  let count = parseInt(stick[_index].num);
                  count += value.value;
                  buystick[_index].num = count;
                  //找不到直接添加
                } else {
                  buystick = stick;
                  buystick.push(stickdetail);
                  console.log(buystick);
                }
              } else {
                //没有本地存储的话直接设置
                buystick = [];
                buystick.push(stickdetail);
              }
              sessionStorage.setItem("buystick", JSON.stringify(buystick));
              router.push("/order");
            } else {
              Toast.fail("支付密码错误");
              value1.value = "";
            }
          });
      } else {
        errorInfo.value = "";
      }
    });

    return {
      onClickLeft,
      onClickRight,
      id,
      indexList,
      show,
      show1,
      showPopup,
      showPopup1,
      value,
      value1,
      showKeyboard,
      errorInfo,
      cation,
    };
  },
  components: {
    vanNavBar: NavBar,
    vanIcon: Icon,
    vanActionBar: ActionBar,
    vanActionBarIcon: ActionBarIcon,
    vanActionBarButton: ActionBarButton,
    vanPopup: Popup,
    vanStepper: Stepper,
    vanPasswordInput: PasswordInput,
    vanNumberKeyboard: NumberKeyboard,
  },
};
</script>

<style lang="less" scoped>
.h-bot {
  width: 375px;
  height: 194px;
  background: #c5c0bd;
  .h-img {
    width: 100%;
    height: 194px;
    margin: auto;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
main {
  background: #fff;
  padding: 14px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-bottom: 9px;
  .title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 27px;
    border-bottom: 1px #e6e6e6 solid;
    h3 {
      font-size: 15px;
      font-weight: 700;
    }
    span {
      color: #333333;
      font-size: 10px;
      .van-icon {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
  .add {
    border-bottom: 1px #e6e6e6 solid;
    p {
      display: flex;
      padding: 18px 0;
      height: 54px;
      font-size: 10px;
      color: #666666;
      img {
        height: 100%;
        margin-right: 9px;
      }
      span {
        line-height: 21px;
      }
    }
  }
  .no {
    padding-top: 13px;
    font-size: 10px;
    line-height: 18px;
    color: #333333;
  }
}
.active {
  background: #fff;
  padding: 14px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  h3 {
    font-size: 14px;
    text-indent: 10px;
    border-left: 6px solid #f04a3a;
    margin-bottom: 14px;
  }
  .a-img {
    width: 339px;
    margin: auto;
    margin-bottom: 50px;
    img {
      width: 100%;
    }
  }
}
/deep/.van-popup {
  padding: 20px 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  .s-top {
    border-bottom: 1px solid #e6e6e6;
    position: relative;
    p {
      padding-top: 10px;
      font-size: 14px;
    }
    span {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      border-radius: 8px;
      font-size: 10px;
      color: #f04a3a;
      background: #ffe5e3;
      margin: 0 10px 10px 0;
    }
    .van-stepper {
      position: absolute;
      right: 10px;
    }
  }
  .van-popup {
    height: 500px;
  }
}
</style>
